/* 登录页思路分析
1.切换登录与注册盒子
2.登录功能
3.注册功能
*/


/* 1.切换登录与注册盒子
    (1)点击登录盒子的切换： 隐藏登录盒子，显示注册盒子
    (2)点击注册盒子的切换： 隐藏注册盒子，显示登录盒子
*/

//(1)点击登录盒子的切换： 隐藏登录盒子，显示注册盒子
document.querySelector('.login a').addEventListener('click', function () {
    document.querySelector('.login').style.display = 'none'
    document.querySelector('.register').style.display = 'block'
})

//(2)点击注册盒子的切换： 隐藏注册盒子，显示登录盒子
document.querySelector('.register a').addEventListener('click', function () {
    document.querySelector('.login').style.display = 'block'
    document.querySelector('.register').style.display = 'none'
})

/* 2.登录功能 :  form表单中的按钮需要阻止默认跳转
(1)表单非空判断
(2)表单正则验证
(3)ajax发送登录请求
(4)登录成功：跳转首页
*/
document.querySelector('.login button').addEventListener('click', function (e) {
    //阻止默认跳转
    e.preventDefault()
    //(1)非空判断
    const form = document.querySelectorAll('.login input')
    if (Array.from(form).some(item => item.value.trim() == '')) {
        Toast.fail('用户名和密码不能为空')
        return
    }
    //(2)正则验证
    if (Array.from(form).some(item => /^\w{6,15}$/.test(item.value) == false)) {
        Toast.fail('用户名密码长度6-15位')
        return
    }
    //(3)ajax发送请求
    axios({
        url: '/api/login',
        method: 'post',
        data: {
            username: form[0].value,
            password: form[1].value
        }
    }).then(res => {
        console.log(res)
        if (res.data.code == 0) {
            //存储token
            localStorage.setItem('mytoken',res.data.token)
            // 登录成功跳转首页(跳转页面不需要提示,因为提示框一出来页面跳转了,用户是看不见提示框的)
            location.href = './index.html'
        }else{
            Toast.info(res.data.message)
        }
    })
})

/* 2.注册功能 :  form表单中的按钮需要阻止默认跳转
(1)表单非空判断
(2)表单正则验证
(3)ajax发送注册请求
(4)登录成功：切换登录盒子 + 重置表单
*/
document.querySelector('.register button').addEventListener('click', function (e) {
    //阻止默认跳转
    e.preventDefault()
    //(1)非空判断
    const form = document.querySelectorAll('.register input')
    if (Array.from(form).some(item => item.value.trim() == '')) {
        Toast.fail('用户名和密码不能为空')
        return
    }
    //(2)正则验证
    if (Array.from(form).some(item => /^\w{6,15}$/.test(item.value) == false)) {
        Toast.fail('用户名密码长度6-15位')
        return
    }
    //(3)ajax发送请求
    axios({
        url: '/api/register',
        method: 'post',
        data: {
            username: form[0].value,
            password: form[1].value
        }
    }).then(res => {
        console.log(res)
        if (res.data.code == 0) {
            //成功提示
            Toast.success('恭喜您，注册成功！')
            //切换盒子
            document.querySelector('.register a').click()
            //重置表单
            document.querySelector('.register form').reset()
        }else{
            Toast.info(res.data.message)
        }
    })
})

